define(['jquery'], ($) => {
    class Header {
        constructor() {
            this.init()
            this.choice()
            this.jump()
            this.shopShow()
            this.changeCare()
        }
        init() {
            $('header').load('/html/modules/header.html')
        }
        choice() {
            $('header').on('click', '.navigation', () => {
                $('#catalog').animate({ 'left': 0 })
                var ls =true
                $('#catalog').on('click', '.ac', (e) => {
                     this.kind = $(e.target).html()
                   if(ls){
                    if (e.target.className === '') {
                        $(e.target).next().css({
                            'display': 'block'
                        })               
                    }
                    $(e.target).children('.list-ul1').css({
                        'display': 'block'
                    })
                    ls =false;
                   }else if(ls==false){
                    if (e.target.className === '') {
                        $(e.target).next('ul').css({
                            'display': 'none'
                        })               
                    }
                    $(e.target).children('.list-ul1').css({
                        'display': 'none'
                    })
                    ls=true
                   }
                })
                $(document).one('dblclick', e => {
                    $('#catalog').animate({ 'left': '-510px' })
                    $('.list-ul1').css({
                        'display': 'none'
                    })
                    $('.list-ul1 ul').css({
                        'display': 'none'
                    })
                })
            })
        }
        jump(){
             $('header').on('click',()=>{
                 $('a').each(function(index,items){
                      $(items).attr('id',index+1)                
                 })
                 $('.list').one('click','a',e=>{
                    //  const title =$(e.target).html()
                    //  $(e.target).attr('href',`../../../html/list.html?${title}`)              
                    const id = $(e.target).attr('id')
                    const name = $(e.target).html()     
                    $(e.target).attr('href',`../../../html/list.html?id=${id}&name=${name}&kind=${this.kind}`)                       
                 })      
             })      
        }
        shopShow(){
            $('header').on('click', '#aa', () => {
                $('#shop').animate({ 'right': 0 })
            })
            $(document).on('dblclick', e => {
                $('#shop').animate({ 'right': '-500px' })        
            })
        }     
        changeCare(){
            require(['./config'],()=>{
                require(['template'],(template)=>{
                    const cart = localStorage.getItem('cart')
                if (cart) {
                    this.cart = JSON.parse(cart)       
                    console.log(this.cart);
                                
                    $('#shop-show').html(template('shopTenmplate', { cart:this.cart }))
                } else {
                    $('#shopping_car').hide()
                    $('#cart-empty').show()
                }
                })
            })
        }  
    }
    return new Header()
})
